import React from 'react';
import {
    View,
    Text, SectionList,
    StyleSheet
} from 'react-native';
import MenuCell from "../../components/me/MenuCell";
import {menus} from "./meMenuConfig";
import MeHeader from "../../components/me/Header";


class Me extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {}

        this.renderHeader = this.renderHeader.bind(this);
    }

    render() {
        return (
            <SectionList style={styles.container}
                         ListHeaderComponent={this.renderHeader}
                         renderItem={this.renderItem}
                         keyExtractor={this._keyExtractor}
                         sections={menus}/>
        )
    }

    _keyExtractor = (item, index) => index;

    renderHeader() {
        return <MeHeader showLogin={this.showLogin}/>
    }

    renderSectionHeader = (sectionData, sectionId) => {
        return <View style={styles.section}/>
    }

    renderItem = ({item, index}) => {
        return <MenuCell menu={item}/>
    }

    showLogin = ()=>{
        this.props.navigator.showModal({
            screen:'interview.login',
            animationType: 'slide-up'
        })
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1
    },
    header:{
        backgroundColor:'blue'
    }
})


export default Me